<template>
	<view class="top">
		<!-- logo -->
		<image src="../../static/logo.png" class="logo" mode="widthFix"></image>
		<!-- 标题 -->
		<view class="top-title">
			<view class="headline">福建教育网 www.fetv.cn</view>
			<view class="subheadline">主管：福建省委教育工委、福建省教育厅</view>
			<view class="subheadline">主办：福建教育电视台</view>
		</view>
		<!-- 搜索框 -->
		<view>
			<view v-if="isShow" class="search-box" @click="toSearch">
				<view class="search-value">搜搜</view>
				<image class="search-img" src="../../static/s.png"></image>
			</view>
			<view v-else class="right-box" @click="showBox">
				<image src="../../static/g7.png" class="top-button"></image>
			</view>
		</view>
		<view v-show="isShowBox" class="bar-box">
				<view @click="toUrl" data-id="home">
					<view>首页</view>
				</view>
				<view v-for="(item,index) in navigation" @click="toUrl" :key="index" :data-id="index">
					<view>
						{{item.itemTitle}}
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "component-navigation",
		props: {
			isSearch: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				isShow: this.isSearch,
				isShowBox:false,
				navigation:[]
			};
		},
		mounted() {
			this.navigation = uni.getStorageSync('allNavigation')
		},
		methods:{
			showBox(){
				this.isShowBox = !this.isShowBox
			},
			toSearch(){
				uni.navigateTo({
					url:"/pages/search/search"
				})
			},
			toUrl(e){
				const id = e.currentTarget.dataset.id
				this.isShowBox = false
				if(id == 'home'){
					uni.switchTab({
						url:'../../pages/index/index'
					})
				}else{
					uni.navigateTo({
						url:'../../subpages/news/news?title='+this.navigation[id].title,
					})
				}
			}
		}
	}
</script>

<style>
	view {
		box-sizing: border-box;
	}

	.top {
		width: 100%;
		height: 74px;
		background-color: #BA0825;
		display: flex;
		box-sizing: border-box;
		justify-content: flex-start;
		align-items: center;
	}

	.logo {
		width: 58px;
		margin-left: 15px;
		display: inline-block;
	}

	.top>.top-title {
		margin-left: 8px;
	}

	.top>.top-title>.headline {
		font-size: 15px;
		font-family: Noto Sans S Chinese;
		font-weight: 400;
		font-stretch: normal;
		color: #FFDCAB;
		line-height: 20px;
	}

	.top>.top-title>.subheadline {
		font-size: 10px;
		font-family: Noto Sans S Chinese;
		font-weight: 400;
		letter-spacing: 0;
		font-stretch: normal;
		color: #FFDCAB;
		opacity: 0.5;
	}

	.search-box {
		width: 76px;
		height: 33px;
		background: #a70721;
		border-radius: 17px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		box-sizing: border-box;
		margin-left: 8px;
		padding-right: 10px;
	}

	.search-value {
		font-size: 13px;
		font-family: Noto Sans S Chinese;
		font-weight: 400;
		color: #e894a2;
		margin-right: 14px;
	}

	.search-img {
		width: 15px;
		height: 15px;
	}

	.right-box {
		width: 75px;
		display: flex;
	}

	.top-button {
		width: 43rpx;
		height: 40rpx;
		margin: auto;
	}

	.bar-box {
		z-index: 3;
		position: absolute;
		top: 74px;
		right: 0;
		width: 70%;
		height: 300px;
		font-family: NotoSansHans-Bold;
		font-size: 15px;
		font-weight: 400;
		font-stretch: normal;
		line-height: 37px;
		letter-spacing: 0px;
		text-align: center;
		color: #ba0825;
		overflow: auto;
		background: rgba(255, 248, 249, .95);
	}
	.bar-box::-webkit-scrollbar{
		display: none;
	}
</style>
